import {
  Component,
  OnInit,
  Inject,
  Output,
  Input,
  ViewChild,
  ElementRef,
  TemplateRef,
  OnChanges,
  SimpleChange,
  DoCheck,
  EventEmitter,
  OnDestroy,
  ChangeDetectorRef
} from "@angular/core";
import { Observable, of, throwError, Subscription } from "rxjs";
import { PLATFORM_ID, APP_ID } from "@angular/core";
import { isPlatformServer } from "@angular/common";
import { environment } from "@environment/environment";

import { LocaleService, TranslationService, Language } from "angular-l10n";

declare var require: any;

@Component({
  selector: "app-slider-code",
  templateUrl: "./slider-code.component.html",
  styleUrls: ["./slider-code.component.scss"]
})
export class SliderCodeComponent implements OnInit, OnDestroy {
  @ViewChild("loading")
  loading: ElementRef;
  el = null;
  code = null;

  @Output()
  onChangeValidate: EventEmitter<any> = new EventEmitter();
  // 注册验证码数据
  // @Input()
  // data: number;
  // oldData: number;
  isServer = true;

  registerSub: Subscription;

  timer: any;

  sub$ = {
    defaultLocaleChanged$: null,
    registerSub$: null
  };

  constructor(
    el: ElementRef,
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject("SliderCodeService") private sliderCodeService,
    @Inject("UtilsService") private utilsService,
    private changeDetectorRef: ChangeDetectorRef,
    public translation: TranslationService,
    public locale: LocaleService
  ) {
    this.el = el;
    this.isServer = isPlatformServer(this.platformId);
  }

  async ngOnInit() {
    if (!this.isServer) {
      this.initCode();
      this.addListen();
    }
  }

  initCode() {
    this.sub$.registerSub$ = this.sliderCodeService
      .register({ type: "fullpage" })
      .subscribe(e => {
        this.code = require("../../../../assets/lib/sliderCode/code.js");
        this.code.init(
          this.el.nativeElement,
          this.loading.nativeElement,
          environment.production,
          this.locale.getCurrentLocale()
        );
        this.code.onRegister(e);
        this.onChangeValidate.emit(null);
        this.code.onSuccess = verify => {
          this.onChangeValidate.emit(verify);
          // 如果放到这里可以的话那将会非常完美 但不行
          // this.changeDetectorRef.detectChanges();
        };
      });
  }

  addListen() {
    // this.sub$.defaultLocaleChanged$ = this.locale.defaultLocaleChanged.subscribe(
    //   () => {
    //     switch (this.locale.getCurrentLocale()) {
    //       case "en-US":
    //         this.el.querySelector("span.geetest_radar_tip_content").innerText =
    //           "Click button verification";
    //         this.el.querySelector("span.geetest_reset_tip_content").innerText =
    //           "Click try again";
    //         break;
    //       case "zh-CN":
    //         this.el.querySelector("span.geetest_radar_tip_content").innerText =
    //           "点击按钮进行验证";
    //         this.el.querySelector("span.geetest_reset_tip_content").innerText =
    //           "请点击重试";
    //         break;
    //       case "de-DE":
    //         this.el.querySelector("span.geetest_radar_tip_content").innerText =
    //           "Click button verification";
    //         this.el.querySelector("span.geetest_reset_tip_content").innerText =
    //           "Click try again";
    //         break;
    //     }
    //   }
    // );
  }

  debounce(fn, time = 1000) {
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      fn();
      clearTimeout(this.timer);
    }, time);
  }

  ngOnDestroy() {
    this.utilsService.unsub(this.sub$);
  }

  // ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
  //   console.log(this.code, 2222);
  //   for (const propName in changes) {
  //     if (changes.hasOwnProperty(propName)) {
  //       const changedProp = changes[propName];
  //       if (propName === 'data') {
  //         if (!!changedProp.currentValue) {
  //           // this.code.onRegister(changedProp.currentValue);
  //         }
  //       }
  //     }
  //   }
  // }
  // ngDoCheck() {
  //   if (this.oldData !== this.data) {
  //     this.code.onRegister(this.data);
  //     this.oldData = this.data;
  //   }
  // }
}
